<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-form
              :inline="true"
              :model="dataForm"
              label-width="120px"
              style="text-align:left;"
              ref="dataForm"
              class="form"
              :disabled="true"
            >
              <el-row style="margin-top: -20px;">
                <el-divider content-position="center">
                  <span style="font-size:16px;font-weight:800">基本信息</span>
                </el-divider>
              </el-row>
              <el-row class="search-input">
                <el-form-item label="仓库编码：" prop="code">
                    <el-input v-model="dataForm.code" auto-complete="off" placeholder="请输入仓库编码"></el-input>
                </el-form-item>
                <el-form-item label="仓库名称：" prop="name">
                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入仓库名称"></el-input>
                </el-form-item>
                <el-form-item label="外部编码：" prop="outCode">
                    <el-input v-model="dataForm.outCode" auto-complete="off" placeholder="请输入外部仓库编码"></el-input>
                  </el-form-item>
                  <el-form-item label="仓库归属：" prop="ownerShip">
                      <el-radio v-model="dataForm.ownerShip" :label="1">自有</el-radio>
                      <el-radio v-model="dataForm.ownerShip" :label="2">第三方</el-radio>
                  </el-form-item>
                <el-form-item label="仓库地址：" prop="ownerShip">
                    <el-row>
                      <el-col :span="8">
                          <el-input v-model="dataForm.addressProvinceName" auto-complete="off"></el-input>
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="dataForm.addressCityName" auto-complete="off"></el-input>
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="dataForm.addressAreaName" auto-complete="off"></el-input>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="详细地址：" prop="addressDetail">
                    <el-input v-model="dataForm.addressDetail" auto-complete="off" placeholder="请输入仓库名称"></el-input>
                  </el-form-item>

               <el-form-item label="仓库负责人：" prop="ownerName">
                    <el-input v-model="dataForm.ownerName" auto-complete="off" placeholder="请输入仓库负责人"></el-input>
                  </el-form-item>
                  <el-form-item label="负责人电话" prop="ownerMobile">
                    <el-input v-model="dataForm.ownerMobile" auto-complete="off" placeholder="请输入负责人电话"></el-input>
                  </el-form-item>
                  <el-form-item label="是否对接WMS：" prop="isWms">
                      <el-radio v-model="dataForm.isWms" :label="1">是</el-radio>
                      <el-radio v-model="dataForm.isWms" :label="2">否</el-radio>
                  </el-form-item>
               <el-form-item label="所属组织：" prop="deptId">
                    <el-select v-model="dataForm.deptId" placeholder="请选择所属组织">
                      <el-option
                        v-for="item in selectedOptionsData1"
                        :key="item.id"
                        :label="item.deptName"
                        :value="item.id"
                        style="width:100%"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                <el-form-item label="备注：" prop="remark">
                 <el-input type="textarea" v-model="dataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
              </el-form-item>
              </el-row>
            </el-form>
            <!--按钮-->
            <div class="tool-wrap">
              <div>
                <el-button-group>
                  <el-button type="primary" size="small" @click="back()">关闭</el-button>
                </el-button-group>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";
import { validatePhone } from "@/utils/validate";
//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
  },

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      searchSize: "mini",
      size: "small",
      selectedOptionsData1: [], //商家列表数据
      provinceOptions: [],
      cityOptions: [],
      countryOptions: [],
      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        code: null,
        name: null,
        outCode:null,
        ownerShip:null,

        addressProvinceId:null,
        addressCityId:null,
        addressAreaId:null,
        addressProvinceName:null,
        addressCityName:null,
        addressAreaName:null,

        addressDetail: null,
        ownerName: null,
        ownerMobile: null,
        isWms:null,
        deptId: null,
        status: null,
        deleteFlag: 0
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
    };
  },

  mounted() {
    this.getDetail();
    this.listMerchant();
  },
  methods: {
    //查询所属组织数据
    listMerchant() {
      let this_ = this;
      this.utils.request.queryDeptList({}, function(res) {
        if (res.code === "0000") {
          this_.selectedOptionsData1 = res.data;
        }
      });
    },

    //2.请求列表数据
    getDetail() {
      let this_ = this;
      if (
        this.$route.params.id != null &&
        this.$route.params.id != "undefined"
      ) {
        let params = {};
        params.id = this.$route.params.id;
        this.utils.request.getMStoreDetail(params, function(res) {
          if (res.code === "0000") {
            this_.dataForm = res.data;
          } else {
            this_.$message({ message: "操作失败, " + data.msg, type: "error" });
          }
        });
      }
    },

    // 3.重置搜索框条件
    resetForm() {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    //==========2.3.1 JavaScript 自定义方法区==========

    //返回上一页;
    back() {
      this.$router.push("../Pages/Store/MStoreList");
    }
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
